<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
	export default {
    name: 'PieChart',
    props: ['data'],
	  data() {
      return {
      }
    },
    mounted() {
      this.drawChart()
    },
    watch: {
      'data.data': function(val) {
        this.drawChart()
      },
      deep: true
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(this.$el)
        // 绘制图表
        let xAxisData = this.data.data.map((item) => {
          return item.name
        })
        let colors = ['#FC5D5E', '#FEB80E', '#56A8EE', '#259B24', '#c280ff']
        this.myChart.setOption({
          title: {
            text: '单位: ' + this.data.unit,
            top: '0',
            right: '0',
            textStyle: {
              color: '#929292',
              fontWeight: 'normal',
              fontSize: '12'
            },
          },
          silent: true,
          color: colors,
          legend: {
            orient: 'vartical',
            left: '50%',
            top: '10px',
            itemWidth: 12,
            itemHeight: 12,
            data: xAxisData,
            formatter:(name) => {
              for(var i = 0; i < this.data.data.length; i++){
                if(name == this.data.data[i].name){
                  return '{title|' + name + '}\n{value|' + (this.numFormat(this.data.data[i].value)) +'}{percent|' + (this.data.data[i].percentage) +'%}'
                }
              }
            },
            textStyle: {
              rich: {
                title: {
                  fontSize: 12,
                  lineHeight: 21,
                  color: "#333",
                  padding: [0, 0, 20, 0]
                },
                value: {
                  fontSize: 12,
                  lineHeight: 20,
                  color: "#666",
                  padding: [0, 0, 20, 0]
                },
                percent: {
                  fontSize: 12,
                  lineHeight: 20,
                  color: "#666",
                  padding: [0, 0, 20, 10]
                }
              }
            },
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['50%', '70%'],
              center: ["25%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.data.data
            }
          ]
        })
        window.addEventListener('resize', () => {
          this.myChart.resize()
        });
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
